<template>
  <div class="resume-zh-cn">
    <header>
      <div class="left">
        <h1>个人简历</h1>
        <div class="text">
          <p>细心从每一个小细节开始</p>
          <p>Personal resume</p>
        </div>
      </div>
      <div class="right">
        <div class="icons">
          <span
            ><svg
              t="1733908722973"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5199"
              width="16"
              height="16"
            >
              <path
                d="M970.777 343.427L531.235 196.913c-28.304-14.984-53.278 0-53.278 0L65.054 343.427c-44.953 4.995-26.639 26.639-26.639 26.639l133.195 53.278c-34.964 11.654-26.639 133.194-26.639 133.194-39.958 3.33-39.958 39.958-39.958 39.958-4.995 28.304 26.639 39.959 26.639 39.959l-26.639 199.791h119.875l-26.639-199.791c14.984-14.984 13.319-26.64 13.319-26.64 8.325-49.947-26.639-53.277-26.639-53.277-19.979-64.933 53.278-133.194 53.278-133.194l253.069 93.236c24.974 11.654 39.958 0 39.958 0l452.861-146.514c19.979-11.655-13.318-26.639-13.318-26.639z m-492.82 226.43c-58.272-6.66-226.431-79.917-226.431-79.917v159.833c54.943 81.581 293.028 79.916 293.028 79.916 141.52 1.665 213.111-79.916 213.111-79.916V489.941c-121.54 83.247-279.708 79.916-279.708 79.916z"
                fill="#ffffff"
                p-id="5200"
              ></path></svg
          ></span>
          <span>
            <svg
              t="1733908832533"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10179"
              width="16"
              height="16"
            >
              <path
                d="M618.61 611.856l0 19.748c0 23.182-18.834 42.022-42.016 42.022l-125.048 0c-23.178 0-42.018-18.838-42.018-42.022l0-19.818c-119.752-16.178-213.764-58.824-284.634-89.708l-52.022-19.192L72.872 847.02c0 22.76 16.108 47.13 40.2 47.13l798.218 0c24.722 0 43.908-25.278 43.908-47.13L955.198 496l-51.948 26.078C832.376 552.962 738.368 595.608 618.61 611.856z"
                fill="#ffffff"
                p-id="10180"
              ></path>
              <path
                d="M409.458 559.348l0-32.786c0-23.182 18.84-42.022 42.018-42.022l125.048 0c23.178 0 42.018 18.84 42.018 42.022l0 32.786c156.238-22.478 285.478-92.792 326.656-113.308l51.948-28.706 0-48.346 0-68.14c0.07-45.73-33.896-78.926-80.604-78.926L692.58 221.922 692.58 159.036c0-57.988-62.048-105.188-138.382-105.188L470.16 53.848c-75.56 0-134.67 46.222-134.67 105.188l0 62.886L118.254 221.922c-48.952 0-87.4 34.736-87.4 78.926l0 68.14 0 52.526L72.872 445C114.05 465.586 253.29 537.008 409.458 559.348zM387.442 159.036c0-34.804 31.594-53.1 82.716-53.1l83.968 0c51.336 0 86.436 19.556 86.436 53.1l0 62.886-253.12 0L387.442 159.036 387.442 159.036z"
                fill="#ffffff"
                p-id="10181"
              ></path>
              <path
                d="M461.476 526.562l105.048 0 0 105.042-105.048 0 0-105.042Z"
                fill="#ffffff"
                p-id="10182"
              ></path>
            </svg>
          </span>
          <span>
            <svg
              t="1733908958224"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="29973"
              width="16"
              height="16"
            >
              <path
                d="M881.146627 267.591004L641.189805 27.634183 142.853373 544.393403v239.956822h221.457272l516.835982-516.759221zM641.189805 82.97931l184.534933 184.534933L715.034483 378.281259 530.422789 193.746327l110.767016-110.767017zM179.775712 747.427886V562.816192l313.724738-332.224288 184.534932 184.534933-332.147526 332.301049H179.775712zM142.853373 895.04048h719.793703v-36.845577H142.853373v36.845577z"
                p-id="29974"
                fill="#ffffff"
              ></path>
            </svg>
          </span>
        </div>
      </div>
    </header>
    <div class="outer-divider">
      <div class="primary"></div>
      <div class="dark-yellow"></div>
    </div>
    <main id="pdf-main">
      <div class="inner">
        <ZHBoxVue title="基本信息">
          <div class="resume-content baseInfo">
            <div class="infos">
              <div class="info-item" v-for="item in baseInfo" :key="item.label">
                <div class="label">{{ item.label }}</div>
                <div class="value">：{{ item.value || "无" }}</div>
              </div>
            </div>
            <div class="picture">
              <img v-logo-error :src="headimgurl_base" alt="" />
            </div>
          </div>
        </ZHBoxVue>
        <ZHBoxVue title="教育背景">
          <div class="resume-content">
            <div class="resume-content-list">
              <div
                class="resume-content-item"
                v-for="item in eduListData"
                :key="item.id"
              >
                <div class="header divider-inside">
                  <span>{{
                    `${item.start_year}.${item.start_month}-${item.end_year}.${item.end_month}`
                  }}</span>
                  <span>{{ item.company_title }}</span>
                  <span>{{ item.position_name }}</span>
                </div>
                <div class="content">
                  <div class="label divider-inside">经历描述：</div>
                  <div class="value divider-inside">
                    <div class="ql-editor no-padding">
                      <div v-html="item.job_description"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ZHBoxVue>
        <ZHBoxVue title="工作经验">
          <div class="resume-content">
            <div class="resume-content-list dot">
              <div
                class="resume-content-item"
                v-for="item in workListData"
                :key="item.id"
              >
                <div class="header divider-inside">
                  <span>{{
                    `${item.start_year}.${item.start_month}-${item.end_year}.${item.end_month}`
                  }}</span>
                  <span>{{ item.company_title }}</span>
                  <span>{{ item.position_name }}</span>
                </div>
                <div class="content">
                  <div class="value divider-inside">
                    <div class="ql-editor no-padding">
                      <div v-html="item.job_description"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ZHBoxVue>
        <ZHBoxVue title="教育经历" v-if="false">
          <div class="resume-content">
            <div class="resume-content-list dot">
              <div
                class="resume-content-item"
                v-for="item in eduListData"
                :key="item.id"
              >
                <div class="header divider-inside">
                  <span>{{
                    `${item.start_year}.${item.start_month}-${item.end_year}.${item.end_month}`
                  }}</span>
                  <span>{{ item.company_title }}</span>
                  <span>{{ item.position_name }}</span>
                </div>
                <div class="content">
                  <div class="value divider-inside">
                    <div class="ql-editor no-padding">
                      <div v-html="item.job_description"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ZHBoxVue>
        <ZHBoxVue title="专业技能">
          <div class="resume-content">
            <div
              v-for="item in skillsListData"
              class="divider-inside"
              :key="item.id"
            >
              <div class="raw-html">
                <div class="ql-editor no-padding" v-html="item.job_description"></div>
              </div>
            </div>
          </div>
        </ZHBoxVue>
        <ZHBoxVue title="成就奖励">
          <div class="resume-content">
            <div
              class="line-height"
              v-for="item in honorListData"
              :key="item.id"
            >
              <div class="title divider-inside">
                {{ item.title }}
              </div>
              <div class="descri">
                <div class="label divider-inside">描述：</div>
                <div class="value">
                  <div class="ql-editor no-padding">
                    <div v-html="item.job_description"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </ZHBoxVue>
        <ZHBoxVue title="自我评价">
          <div class="resume-content">
            <div class="line-height divider-inside">
              <div class="ql-editor no-padding">
                <div v-html="intentionData?.objective"></div>
              </div>
            </div>
          </div>
        </ZHBoxVue>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
import { useMemberStore } from "../../../../../store";
import ZHBoxVue from "./components/ZH_box.vue";

const memberStore = useMemberStore();

const data: any = inject("resumeData");
const certificateList = data.value[0].data || [];
const intentionData = data.value[1].data;
const workListData = data.value[2].data || [];
const eduListData = data.value[3].data || [];
const skillsListData = data.value[4].data || [];
const honorListData = data.value[5].data || [];

// 基本信息
const baseInfo = ref();
let { headimgurl_base } = memberStore.profile!;
const initBaseInfo = () => {
  let {
    first_name,
    last_name,
    mobile,
    education,
    birthday,
    cn_address,
    email,
  } = memberStore.profile!;
  baseInfo.value = [
    {
      label: "姓名",
      value: last_name + ' '+ first_name,
    },
    {
      label: "民族",
      value: "",
    },
    {
      label: "电话",
      value: mobile,
    },
    {
      label: "邮箱",
      value: email,
    },
    {
      label: "住址",
      value: cn_address,
    },
    {
      label: "出生年月",
      value: birthday,
    },
    {
      label: "身高",
      value: "",
    },
    {
      label: "政治面貌",
      value: "",
    },
    {
      label: "毕业院校",
      value: "",
    },
    {
      label: "学历",
      value: education,
    },
  ];
};
initBaseInfo();
</script>
<style scoped lang="less">
@import url("./less/zh_cn.less");
.resume-zh-cn {
  padding-top: 30px;
  --primary-color: #4e7282;
  --dark-yellow: #c19f67;
  header {
    padding: 0 80px;
  }
  main {
    padding: 0 60px 0 100px;
  }
}
header {
  margin-bottom: 25px;
  color: var(--primary-color);
  display: flex;
  justify-content: space-between;
  text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.2);
  .left {
    padding-left: 50px;
    display: flex;
    align-items: center;
    h1 {
      font-size: 100px;
      padding-right: 20px;
      margin-right: 20px;
      border-right: 5px solid var(--primary-color);
    }
    .text {
      padding-top: 20px;
      font-size: 30px;
      p:last-child {
        font-size: 50px;
      }
    }
  }
  .right {
    padding-right: 50px;
    display: flex;
    align-items: center;
    .icons {
      gap: 50px;
      display: flex;
      align-items: center;
    }
    span {
      width: 80px;
      height: 80px;
      background-color: var(--dark-yellow);
      display: flex;
      align-items: center;
      border-radius: 50%;
      justify-content: center;
      svg {
        width: 40px;
        height: 40px;
      }
    }
  }
}
.outer-divider {
  overflow: hidden;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  .primary {
    background-color: var(--primary-color);
  }
  .dark-yellow {
    background-color: var(--dark-yellow);
  }
  div {
    transform: skewX(45deg);
    transform-origin: left bottom;
    flex: 1;
    height: 22px;
    &:first-child {
      height: 30px;
      flex: 1.75;
    }
    &:last-child {
      margin-right: -50px;
    }
  }
}

main {
  .inner {
    padding: 50px 0;
    border-left: 2px solid var(--primary-color);
  }
}
</style>
